<!--
 * @Author: 烟浮
 * @Date: 2022-06-26 00:46:58
 * @LastEditTime: 2022-06-26 02:53:20
 * @LastEditors: 锦墨涵秋 275740441@qq.com
 * @FilePath: /vite-ts-vue3/src/components/ShoppingCart.vue
-->
<template>
  <div class="ShoppingCart">
    <h2>您的购物车</h2>
    <p><i>请添加一些商品到购物车</i></p>
    <ul>
      <template v-for="item of cartStore.cartProducts">
        <li>{{ item.title }} - {{ item.price }} X {{ item.quantity }}</li>
      </template>
    </ul>
    <p>商品总价: {{ cartStore.totalPrice }}</p>
    <p>
      <button @click="cartStore.checkouts">结算</button>
    </p>
    <p v-show="cartStore.checkoutStatus">结算{{ cartStore.checkoutStatus }}</p>
  </div>
</template>
<script lang="ts" setup name="ShoppingCart">
import { useCartStore } from "../store/cart";
const cartStore = useCartStore();
</script>
<style scoped lang="less"></style>
